<template>
  <view class="page">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="navbar-content">
        <text class="navbar-title">🎒 {{ platformName || '星点互助帮' }}！</text>
      </view>
    </view>
    
    <!-- 轮播图 -->
    <view class="banner-section">
      <swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" circular>
        <swiper-item v-for="(item, index) in banners" :key="index">
          <view class="banner-item" :style="{ background: item.bgColor }">
            <view class="banner-content">
              <view class="banner-badge">{{ item.badge || '服务多样' }}</view>
              <text class="banner-title">{{ item.title }}</text>
              <view class="banner-subtitle-box">
                <text class="banner-subtitle">{{ item.subtitle }}</text>
              </view>
              <text class="banner-emoji">{{ item.emoji }}</text>
              <view class="banner-dots">
                <view class="dot"></view>
                <view class="dot"></view>
                <view class="dot"></view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 主要服务区域 -->
    <view class="main-services">
      <view class="service-row">
        <view class="service-card pink" @click="goToSnackShop">
          <text class="service-emoji">🛒</text>
          <text class="service-name">零食商城</text>
        </view>
        <view class="service-card green" @click="goToTakeout">
          <text class="service-emoji">🍔</text>
          <text class="service-name">取外卖</text>
        </view>
        <view class="service-card blue" @click="goToExpress">
          <text class="service-emoji">📦</text>
          <text class="service-name">取快递</text>
        </view>
        <view class="service-card purple" @click="goToBuy">
          <text class="service-emoji">☕</text>
          <text class="service-name">代取奶咖</text>
        </view>
      </view>
    </view>

    <!-- 其他服务区域 -->
    <view class="other-services">
      <view class="other-service-item" v-for="(item, index) in otherServices" :key="index" @click="handleOtherService(item)">
        <view class="other-service-icon" :style="{ backgroundColor: item.color }">
          <text class="other-service-emoji">{{ item.emoji }}</text>
        </view>
        <text class="other-service-name">{{ item.name }}</text>
      </view>
      <view class="other-services-spacer"></view>
    </view>

    <!-- 推广区域 -->
    <view class="promo-section">
      <view class="promo-tip">
        <text class="promo-icon">💡</text>
        <text class="promo-text">{{ announcement || '欢迎使用校园零食与代取服务～' }}</text>
      </view>
    </view>

    <!-- 任务大厅入口 -->
    <view class="task-hall-banner" @click="goToTaskHall">
      <view class="task-hall-bg"></view>
      <view class="task-hall-content">
        <text class="task-hall-title">点我进入\n任务大厅！</text>
      </view>
    </view>

    <!-- 当前订单提示（示例） -->
    <view class="current-order" v-if="currentOrder">
      <image class="current-order-avatar" src="/static/images/avatar-default.png" mode="aspectFill"></image>
      <view class="current-order-info">
        <text class="current-order-title">{{ currentOrder.serviceName }}</text>
        <text class="current-order-time">⏱ {{ currentOrder.deadline }}</text>
      </view>
      <view class="current-order-btn">待接单</view>
    </view>

    <!-- 相关信息已隐藏 -->
    <view class="hidden-info">
      <text class="hidden-text">[相关信息已隐藏]</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      announcement: '',
      platformName: '',
      defaultBanners: [
        {
          title: '开学啦！',
          subtitle: '下单优惠',
          emoji: '😎',
          bgColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
        },
        {
          title: '新用户福利！',
          subtitle: '首单立减',
          emoji: '🎉',
          bgColor: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
        }
      ],
      banners: [],
      otherServices: [
        { name: '其他服务', emoji: '🐰', color: '#a8e6cf' }
      ],
      currentOrder: null
      // currentOrder: {
      //   serviceName: '其他服务',
      //   deadline: '20:05截止'
      // }
    }
  },
  onLoad() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight || 20
    
    // 加载数据
    this.loadData()
    // 默认展示
    this.banners = this.defaultBanners.slice()
  },
  onPullDownRefresh() {
    this.loadData()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  methods: {
    async loadData() {
      try {
        const { getHomeConfigs } = require('@/api/config')
        // 获取首页配置（公告、轮播图等）
        const homeConfigs = await getHomeConfigs().catch(() => ({}))
        
        this.announcement = (homeConfigs.announcement || '').toString()
        // 平台名称从 store 获取（小程序初始化时已存储）
        this.platformName = this.$store.state.platformName || '星点互助帮'

        // 尝试解析轮播图配置
        let customBanners = []
        try {
          if (homeConfigs.bannersConfig) {
            const parsed = JSON.parse(homeConfigs.bannersConfig)
            if (Array.isArray(parsed) && parsed.length > 0) {
              customBanners = parsed
            }
          }
        } catch (e) {
          console.warn('轮播图配置解析失败:', e)
        }
        
        // 若有自定义配置则使用，否则使用默认
        if (customBanners.length > 0) {
          console.log('Using custom banners config:', customBanners)
          this.banners = customBanners
        } else {
          console.log('Using default banners')
          this.banners = this.defaultBanners.slice()
        }
      } catch (err) {
        console.error('loadData error:', err)
        this.announcement = ''
        this.platformName = ''
        this.banners = this.defaultBanners.slice()
      }
    },
    goToSnackShop() {
      uni.navigateTo({
        url: '/pages/snack/list'
      })
    },
    goToExpress() {
      // 直接跳转到创建订单页面 - 取快递（categoryId=2）
      uni.navigateTo({
        url: '/pages/pickup/create?categoryId=2'
      })
    },
    goToTakeout() {
      // 直接跳转到创建订单页面 - 取外卖（categoryId=1）
      uni.navigateTo({
        url: '/pages/pickup/create?categoryId=1'
      })
    },
    goToBuy() {
      // 直接跳转到创建订单页面 - 代取奶咖（categoryId=3）
      uni.navigateTo({
        url: '/pages/pickup/create?categoryId=3'
      })
    },
    handleOtherService(item) {
      uni.navigateTo({
        url: '/pages/pickup/other'
      })
    },
    goToTaskHall() {
      // 任务大厅跳转到可接订单页面
      uni.navigateTo({
        url: '/pages/pickup/available'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f5f7fa;
}

/* 自定义导航栏 */
.custom-navbar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding-bottom: 20rpx;
  
  .navbar-content {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .navbar-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #fff;
    }
  }
}

/* 轮播图区域 */
.banner-section {
  padding: 20rpx;
}

.banner-swiper {
  height: 340rpx;
  border-radius: 24rpx;
  overflow: hidden;
}

.banner-item {
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 24rpx;
  position: relative;
  overflow: hidden;
  
  .banner-content {
    position: relative;
    height: 100%;
    padding: 30rpx;
    
    .banner-badge {
      display: inline-block;
      background: rgba(255, 255, 255, 0.3);
      color: #fff;
      font-size: 24rpx;
      padding: 8rpx 20rpx;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
    }
    
    .banner-title {
      display: block;
      font-size: 68rpx;
      font-weight: bold;
      color: #fff;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
      margin-bottom: 20rpx;
    }
    
    .banner-subtitle-box {
      display: flex;
      align-items: center;
      gap: 16rpx;
      
      .banner-subtitle {
        font-size: 32rpx;
        color: #fff;
        background: rgba(100, 150, 255, 0.5);
        padding: 10rpx 24rpx;
        border-radius: 20rpx;
      }
      
      .banner-tag {
        background: #ffd54f;
        color: #333;
        font-size: 24rpx;
        padding: 8rpx 16rpx;
        border-radius: 16rpx;
        font-weight: bold;
      }
    }
    
    .banner-emoji {
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);
      font-size: 120rpx;
    }
    
    .banner-dots {
      position: absolute;
      bottom: 30rpx;
      right: 30rpx;
      display: flex;
      gap: 12rpx;
      
      .dot {
        width: 20rpx;
        height: 20rpx;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 50%;
      }
    }
  }
}

/* 主要服务卡片 */
.main-services {
  padding: 0 20rpx;
  margin-top: 20rpx;
}

.service-row {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.service-card {
  flex: 1;
  height: 220rpx;
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  
  &.pink {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  }
  
  &.green {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  }
  
  &.blue {
    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
  }
  
  &.purple {
    background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
  }
  
  .service-emoji {
    font-size: 88rpx;
  }
  
  .service-name {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
  }
}

/* 其他服务区域 */
.other-services {
  padding: 40rpx 20rpx 20rpx;
  display: flex;
  justify-content: flex-start;
  gap: 20rpx;
}

.other-service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.other-services-spacer {
  flex: 1;
}

.other-service-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  
  .other-service-emoji {
    font-size: 56rpx;
  }
}

.other-service-name {
  font-size: 24rpx;
  color: #666;
}

/* 推广区域 */
.promo-section {
  padding: 20rpx;
  margin: 20rpx 0;
}

.promo-tip {
  background: linear-gradient(135deg, #e3f2fd 0%, #fff3e0 100%);
  padding: 24rpx 32rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
  
  .promo-icon {
    font-size: 40rpx;
  }
  
  .promo-text {
    flex: 1;
    font-size: 26rpx;
    color: #333;
    line-height: 1.5;
  }
}

/* 任务大厅 */
.task-hall-banner {
  margin: 20rpx;
  height: 280rpx;
  border-radius: 24rpx;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
  
  .task-hall-bg {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  }
  
  .task-hall-content {
    position: absolute;
    left: 40rpx;
    top: 50%;
    transform: translateY(-50%);
    
    .task-hall-title {
      font-size: 64rpx;
      font-weight: bold;
      color: #333;
      line-height: 1.3;
      text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
    }
  }
}

/* 当前订单 */
.current-order {
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  
  .current-order-avatar {
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
  }
  
  .current-order-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8rpx;
    
    .current-order-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
    }
    
    .current-order-time {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .current-order-btn {
    background: linear-gradient(135deg, #a8ff78 0%, #78ffd6 100%);
    color: #333;
    font-size: 26rpx;
    font-weight: bold;
    padding: 16rpx 32rpx;
    border-radius: 40rpx;
  }
}

/* 隐藏信息 */
.hidden-info {
  padding: 60rpx 20rpx;
  text-align: center;
  
  .hidden-text {
    font-size: 24rpx;
    color: #ccc;
  }
}
</style>

